<!doctype html>
<html lang="en">

	<head>
		<meta charset="utf-8">
		<title>jQuery 菜单（Menu）1.0.0 </title>
		<script type="text/javascript" src="js/jquery-2.1.0.js"></script>

	</head>
	<style>
		.open {
			color: #7FFFD4;
		}
		
		.selected {
			color: red;
		}
	</style>

	<body>

		<div class="menu">

			<ul>
				<li>
					<a>1-></a>
					<ul>
						<li>
							<a>1.1</a>
						</li>
						<li>
							<a>1.2</a>
						</li>
						<li>
							<a>1.3</a>
						</li>
						<li>
							<a>1.4-></a>
							<ul>
								<li>
									<a>1.41</a>
								</li>
								<li>
									<a>1.42</a>
								</li>
								<li>
									<a>1.43</a>
								</li>
								<li>
									<a>1.44</a>
								</li>
							</ul>
						</li>
					</ul>
				</li>
				<li>
					<a>2</a>
				</li>
				<li>
					<a>3</a>
				</li>
				<li>
					<a>4-></a>
					<ul>
						<li>
							<a>4.1</a>
						</li>
						<li>
							<a>4.2</a>
						</li>
						<li>
							<a>4.3</a>
						</li>
						<li>
							<a>4.4</a>
						</li>
					</ul>
				</li>

				<li>
					<a>5</a>
				</li>
			</ul>
		</div>

		<script>
			
			$(function() {
				$(".menu ul").find('ul').hide();
				
				$(".menu a").hover(
					/*找父亲（li）下面的ul*/
					function() {
						$(this).parent('li').find("ul").show(600);
					},
					function() {
						$(this).parent('li').find("ul").hide(300);
					}
				);
			});
		</script>
	</body>

</html>